<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>弹窗1</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="author" content="yb">
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="Expires" content="0">
    <!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <!-- <link rel="stylesheet" href="../style/css/base.css"> -->
    <link href="./mui-3.7.1.min.css" rel="stylesheet">
    <style>
        body {
            background: #f1f1f1;
        }
        /*----------------mui.showLoading---------------*/
.mui-show-loading {
    position: fixed;
    padding: 5px;
    width: 120px;
    min-height: 120px;
    top: 45%;
    left: 50%;
    margin-left: -60px;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    border-radius: 5px;
    color: #FFFFFF;
    visibility: hidden;
    margin: 0;
    z-index: 2000;

    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    opacity: 0;
    -webkit-transform: scale(0.9) translate(-50%, -50%);
    transform: scale(0.9) translate(-50%, -50%);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.mui-show-loading.loading-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
}
.mui-show-loading .mui-spinner{
    margin-top: 24px;
    width: 36px;
    height: 36px;
}
.mui-show-loading .text {
    line-height: 1.6;
    font-family: -apple-system-font,"Helvetica Neue",sans-serif;
    font-size: 14px;
    margin: 10px 0 0;
    color: #fff;
}

.mui-show-loading-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.mui-show-loading-mask-hidden{
    display: none !important;
}
    </style>
</head>

<body>
    <button id="btn1">按钮</button>
    <button id="btn2">加载</button>
</body>
<script src="./mui-3.7.1.min.js"></script>
<script>
    //扩展mui.showLoading
    (function ($, window) {
        //显示加载框
        $.showLoading = function (message, type) {
            if ($.os.plus && type !== 'div') {
                $.plusReady(function () {
                    plus.nativeUI.showWaiting(message);
                });
            } else {
                var html = '';
                html += '<i class="mui-spinner mui-spinner-white"></i>';
                html += '<p class="text">' + (message || "数据加载中") + '</p>';

                //遮罩层
                var mask = document.getElementsByClassName("mui-show-loading-mask");
                if (mask.length == 0) {
                    mask = document.createElement('div');
                    mask.classList.add("mui-show-loading-mask");
                    document.body.appendChild(mask);
                    mask.addEventListener("touchmove", function (e) {
                        e.stopPropagation();
                        e.preventDefault();
                    });
                } else {
                    mask[0].classList.remove("mui-show-loading-mask-hidden");
                }
                //加载框
                var toast = document.getElementsByClassName("mui-show-loading");
                if (toast.length == 0) {
                    toast = document.createElement('div');
                    toast.classList.add("mui-show-loading");
                    toast.classList.add('loading-visible');
                    document.body.appendChild(toast);
                    toast.innerHTML = html;
                    toast.addEventListener("touchmove", function (e) {
                        e.stopPropagation();
                        e.preventDefault();
                    });
                } else {
                    toast[0].innerHTML = html;
                    toast[0].classList.add("loading-visible");
                }
            }
        };

        //隐藏加载框
        $.hideLoading = function (callback) {
            if ($.os.plus) {
                $.plusReady(function () {
                    plus.nativeUI.closeWaiting();
                });
            }
            var mask = document.getElementsByClassName("mui-show-loading-mask");
            var toast = document.getElementsByClassName("mui-show-loading");
            if (mask.length > 0) {
                mask[0].classList.add("mui-show-loading-mask-hidden");
            }
            if (toast.length > 0) {
                toast[0].classList.remove("loading-visible");
                callback && callback();
            }
        }
    })(mui, window);

    var msg = 'oa是个好系统';
    var tt = '提示'
    // confirm(message,title,value[],func,type)
    $('#btn1').click(function () {
        mui.confirm(msg, tt, ['取消', '确认'], function (e) {
            if (e.index == 0) {
                mui.toast('您已取消', {
                    duration: 'short',
                    type: 'div'
                })
            }
            if (e.index == 1) {
                mui.toast('您已确认', {
                    duration: 'short',
                    type: 'div'
                })
            }
        })
    })
    $('#btn2').click(function () {
        mui.showLoading("正在加载..", "div");
        mui.hideLoading(function(){
            alert('加载完毕');
        }); //隐藏后的回调函数
    })
</script>